<template>
  <div class="goods">
    <div class="searchForm">
      <myForm :formItems="formItems" v-model="formValue">
        <template #header>
          <h1 class="header">物资申请表搜索</h1>
        </template>
        <template #footer>
          <div class="handle-btns">
            <el-button icon="el-icon-refresh" @click="handleResetClick"
              >重置</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            >
          </div>
        </template>
      </myForm>
    </div>

    <Goodstable
      :list-data="records"
      v-bind="contentTableConfig"
      v-model:page="page"
      :listCount="listCount"
    >
      <template #handler="scope">
        <div>
          <el-button
            size="small"
            type="danger"
            @click="handlieRemove(scope.row)"
            >删除</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="handlieApprove(scope.row)"
            >修改申请表</el-button
          >
        </div>
      </template>
    </Goodstable>

    <div class="page-modal">
      <el-dialog
        title="提交物资申请"
        v-model="dialogVisible"
        width="30%"
        center
        destroy-on-close
      >
        <myForm v-bind="modalConfig" v-model="formData"></myForm>
        <slot></slot>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handlieApproveRequest">
              确 定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import myForm from '@/baseUI/form'
import Goodstable from '@/baseUI/table'
import { goodsFormConfig } from './config/form.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'
import { usegoods } from '@/store/goodsStore'
import { mockRequest } from '@/service/index'
import { selectGoodsT, approveType } from '@/service/goods/type'
/* 表单业务 */
const formItems = goodsFormConfig?.formItems ?? []
const formOriginData: any = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}
//搜索框表单数据
const formValue = ref(formOriginData)

//情况数据
const handleResetClick: any = () => {
  formValue.value = formOriginData
  listSearch(page.value)
}

//搜索响应
const handleSearch = () => {
  if (formValue.value.gName) {
    listSearch({ name: formValue.value.gName, ...page.value })
  }
}
//请求数据
const listSearch = (params: selectGoodsT) => {
  goods.selectApprove(params)
}
/* 
  表格业务
 */

//初始化表格
const goods = usegoods()
//分页器数据
const page = ref({
  currentPage: 1,
  nextPage: 10
})
watch(page, () => listSearch(page.value))
listSearch(page.value)
//从状态库获取列表
const records = computed(() => goods.records('approve'))
const listCount = computed(() => goods.listCount('approve'))
//提交申请
const handlieApprove = (item: any) => {
  formData.value.userId = 99
  formData.value.userName = '测试人员'
  formData.value.gtype = item.gtype
  formData.value.ghelpgoods = item.gname
  dialogVisible.value = !dialogVisible.value
}
const ids = ref<number[]>([])

//删除
const handlieRemove = (item: any) => {
  ids.value.push(item.id)
  goods.deleteTable('approve', ids.value)
  ids.value = []
  listSearch(page.value)
}

/* 交流框 */
const dialogVisible = ref(false)

const formOriginData2: any = {}
for (const item of modalConfig?.formItems ?? []) {
  formOriginData2[item.field] = ''
}
//搜索框表单数据
const formData = ref<approveType>(formOriginData2)
const handlieApproveRequest = () => {
  if (formData.value.gcount && formData.value.userId) {
    goods.approveGoods({ ...formData.value })
  } else {
    alert('请确保信息的完整')
  }
  dialogVisible.value = !dialogVisible.value
}
</script>
<style scoped lang="less">
.goods {
  padding: 30px;
}
.searchForm {
  margin-bottom: 20px;
}
.handle-btns {
  position: absolute;
  right: 40px;
}
</style>
